<template>
    <div class="pages">
        <van-nav-bar title="账单管理" left-arrow fixed safe-area-inset-top @click-left="onClickLeft">
            <template #right>
                <img v-if="is_admin == 1" class="nav-right" src="https://files.onestep6.com/cloud/delivery-menu.png" alt="" @click="onGy" />
            </template>
        </van-nav-bar>

        <div class="time-tabs">
            <div class="time-left">
                <div :class="{ 'time-active': is_active == 0 }" @click="onActive(0)">已打款</div>
                <div :class="{ 'time-active': is_active == 1 }" @click="onActive(1)">待确认账单</div>
                <div :class="{ 'time-active': is_active == 2 }" @click="onActive(2)">待结算订单</div>
            </div>
        </div>

        <div class="content">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <div v-if="is_active != 2">
                    <div class="content-item" v-for="(item, index) in list" :key="index" @click="onDetail(item)">
                        <div class="item-title">关联订单号：{{ item.order_num }}</div>
                        <div>
                            <div class="item-flex">
                                <div class="item-name">账单金额</div>
                                <div class="item-price">¥{{ item.price }}</div>
                            </div>
                            <div class="item-flex">
                                <div class="item-name">下单店铺</div>
                                <div class="item-num">{{ item.user_shop_name }}</div>
                            </div>
                            <div class="item-flex">
                                <div class="item-name">账单时间</div>
                                <div class="item-num">{{ item.created }}</div>
                            </div>
                            <div v-if="is_active == 1" class="shop-btn">
                                <van-button v-if="item.status == 1" class="btn-over" @click.stop="onBill(item, index)">确认账单</van-button>
                                <div v-if="item.status == 2" class="btn-txt">待打款</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="is_active == 2">
                    <div class="content-c" v-for="(item, index) in list" :key="index" @click="onOrderDetail(item)">
                        <div class="conetnt-title">
                            <div class="title-flex">
                                <img class="title-img" src="https://files.onestep6.com/cloud/order-icon.png" />
                                <div class="title-txt">{{ item.user_shop_name }}</div>
                            </div>
                        </div>
                        <div class="content-order">
                            <div class="order-scroll">
                                <div class="scroll">
                                    <div class="scroll-content">
                                        <img class="scroll-img" v-for="(itemC, indexC) in item.goods" :key="indexC"
                                            :src="itemC.good_pics" />
                                    </div>
                                </div>
                            </div>
                            <div class="order-num">
                                <span>共{{ item.goods_count }}件</span>
                                <img class="num-icon" src="https://files.onestep6.com/cloud/order-right.png" />
                            </div>
                        </div>
                        <div class="content-time">
                            <div class="time-txt">配送时间：<span class="txt-col">{{ item.delivery_time }}</span></div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>

        <div class="price" v-if="is_active == 1 && list.length != 0">
            <div class="price-right">
				<van-button class="price-btn" @click="onAllRight">一键确认</van-button>
			</div>
		</div>

        <popup-choose ref="popupChoose" txt="请仔细核对账单，账单无误后，点击确认，平台将会安排财务为你打款。" @right="onRight" />
        <channel-select ref="channelSelect" :formList="formList" @select="shopSelect" />

    </div>
</template>
<script>
import { settlementList, settlementOrderList, setEndOrder, shopList } from "@/api/cloud";
import popupChoose from "@/components/popupChoose.vue";
import channelSelect from '@/components/channelSelect.vue';
export default {
    components: {
        popupChoose,
        channelSelect
    },
    data() {
        return {
            is_active: 0,
            pages: 1,
            size: 10,
            list: [],
            loading: false,
            finished: false,
            bill_id: '',
            bill_index: '',
            is_admin: 0,
            formList: [],
            shop_id: ''
        }
    },
    activated() {
        console.log('activated')
        this.is_admin = localStorage.getItem('is_admin')
        if (this.is_admin == 1) {
            this.shopList();
        }
        const is_active = localStorage.getItem('is_active')
        this.is_active = is_active || 0;
        this.onLoad()
    },
    deactivated() {
        console.log('deactivated')
        localStorage.setItem('is_active', this.is_active)
    },
    mounted() {
        // this.is_admin = localStorage.getItem('is_admin')
        // if (this.is_admin == 1) {
        //     this.shopList();
        // }
        // this.onLoad()
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        onActive(num) {
            if (num == this.is_active) {
                return false;
            }
            this.is_active = num;
            this.pages = 1;
            this.finished = false;
            this.loading = true;
            this.list = [];
            this.onLoad();
        },
        async onLoad() {
            let params = {
                pages: this.pages,
                size: this.size,
                status: '',
                shop_id: ''
            }
            if (this.is_active == 0) {
                params.status = 3;
            }
            if (this.is_active == 1) {
                params.status = 1;
            }
            if (this.shop_id) {
                params.shop_id = this.shop_id;
            }
            if (this.is_active == 2) {
                const res = await settlementOrderList(params);
                if (res.status == 1) {
                    this.list = this.list.concat(res.data.list);
                    this.loading = false;
                    if (this.list.length >= res.data.count) {
                        this.finished = true;
                    } else {
                        this.pages++;
                    }
                }
            } else {
                const res = await settlementList(params);
                if (res.status == 1) {
                    this.list = this.list.concat(res.data.list);
                    this.loading = false;
                    if (this.list.length >= res.data.count) {
                        this.finished = true;
                    } else {
                        this.pages++;
                    }
                }
            }
        },
        onDetail(item) {
            this.$router.push({
                path: '/billDetail',
                query: {
                    id: item.id
                }
            })
        },
        onOrderDetail(item) {
            this.$router.push({
                path: '/orderDetail',
                query: {
                    id: item.id
                }
            })
        },
        // 确认账单
        onBill(item, index) {
            this.bill_id = [item.id];
            this.bill_index = index;
            this.$refs.popupChoose.show()
        },
        // 一键确认
        onAllRight() {
            let arr = [];
            this.list.forEach((item)=>{
                if (item.status == 1) {
                    arr.push(item.id)
                }
            })
            console.log(arr)
            this.bill_id = arr;
            if (arr.length == 0) {
                this.$toast('暂无需要确认的订单')
            } else {
                this.$refs.popupChoose.show()
            }
            
        },
        // 确认订单
        async onRight() {
            const res = await setEndOrder({
                id_arr: this.bill_id
            })
            if (res.status == 1) {
                if (this.bill_id.length == 1) {
                    this.$set(this.list[this.bill_index], 'status', 2);
                } else {
                    this.list.forEach((item,index)=>{
                        console.log(item)
                        this.$set(this.list[index], 'status', 2);
                    })
                }
            }
        },
        // 获取所有供货商
        async shopList() {
            const res = await shopList({});
            if (res.status == 1) {
                console.log(res)
                res.data.shop_list.map((item)=>{
                item.name = item.realname;
                })
                this.formList =[ {id: 0, name: '全部'},...res.data.shop_list];
            }
        },
        onGy() {
            this.$refs.channelSelect.init();
        },
        shopSelect(obj) {
            console.log(obj)
            this.shop_id = obj.id;
            this.pages = 1;
            this.loading = true;
            this.list = [];
            this.finished = false;
            this.onLoad();
        },
    },
}
</script>
<style lang="less" scoped>
.pages {
    padding-top: calc(92px + 88px);
    min-height: 100vh;
    background: #F6F6F6;

    ::v-deep .van-nav-bar .van-icon {
        color: #323233;
    }

    ::v-deep .van-nav-bar {
        background: #FFFFFF;
    }

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }
}
.nav-right{
    display: block;
    width: 33px;
    height: 33px;
    // margin: 0 38px;
}

.time-tabs {
    position: fixed;
    left: 0;
    top: 92px;
    z-index: 100;
    width: 100vw;
    height: 88px;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
    padding-top: 32px;

    .time-left {
        flex: 1;
        padding-left: 52px;
        padding-right: 50px;
        display: flex;
        justify-content: space-between;
        height: 58px;
        font-size: 28px;
        line-height: 28px;
        font-weight: 400;
        color: #798391;
    }

    .time-active {
        position: relative;
        font-weight: bold;
        color: #49CA6F;
    }

    .time-active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 6px;
        background: #49CA6F;
    }

    .time-right {
        display: block;
        width: 33px;
        height: 33px;
        margin: 0 38px;
    }
}

.content {
    padding: 24px;

    .content-item {
        width: 702px;
        padding: 32px 22px 0px 36px;
        background: #FFFFFF;
        border-radius: 16px;
        margin-bottom: 20px;

        .item-title {
            font-size: 28px;
            line-height: 34px;
            color: #202630;
            font-weight: bold;
            border-bottom: 2px solid #F5F5F6;
            padding-bottom: 30px;
            margin-bottom: 32px;
        }

        .item-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
        }

        .item-name {
            font-size: 24px;
            line-height: 30px;
            color: #798391;
            font-weight: bold;
        }

        .item-num {
            font-size: 24px;
            line-height: 30px;
            font-weight: bold;
            color: #202630;
        }

        .item-price {
            font-size: 24px;
            line-height: 30px;
            font-weight: bold;
            color: #FF4D4F;
        }
        .shop-btn {
            display: flex;
            justify-content: flex-end;
            padding-bottom: 48px;
            padding-top: 28px;
            border-bottom: 2px solid #F5F5F6;

            .btn-over {
                flex-shrink: 0;
                display: block;
                width: 128px;
                height: 56px;
                background: #49CA6F;
                border-radius: 39px;
                font-size: 24px;
                line-height: 56px;
                color: #FFFFFF;
                font-weight: 500;
                border: none;
                margin-left: 14px;
                padding: 0;
            }

            .btn-txt {
                width: 128px;
                height: 56px;
                background: #F5F5F6;
                border-radius: 39px;
                font-size: 24px;
                line-height: 56px;
                color: #798391;
                font-weight: 400;
                text-align: center;
            }
        }
    }
}

.content-c {
    width: 702px;
    border-radius: 16px;
    padding: 30px 26px 20px 32px;
    background: #FFFFFF;
    margin: 0 auto 24px;

    .conetnt-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 32px;

        .title-flex {
            display: flex;
            align-items: center;
        }

        .title-img {
            flex-shrink: 0;
            display: block;
            width: 36px;
            height: 36px;
            margin-right: 8px;
        }

        .title-txt {
            font-size: 32px;
            line-height: 36px;
            color: #141414;
            font-weight: bold;
        }
    }

    .content-order {
        display: flex;
        align-items: center;
        margin-bottom: 40px;

        .order-scroll {
            width: 502px;
            height: 128px;

            .scroll {
                width: 502px;
                height: 128px;
                overflow-x: scroll;
                scrollbar-width: none;
                /* Firefox 隐藏滚动条 */
                -ms-overflow-style: none;
                /* IE 10+ 隐藏滚动条 */
            }

            .scroll::-webkit-scrollbar {
                display: none;
                /* Chrome、Safari、Edge 隐藏滚动条 */
            }
        }

        .scroll-content {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;

            .scroll-img {
                flex-shrink: 0;
                display: block;
                width: 128px;
                height: 128px;
                border-radius: 8px;
                margin-right: 24px;
            }
        }

        .order-num {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 24px;
            line-height: 24px;
            color: #798391;
            font-weight: 400;

            .num-icon {
                flex-shrink: 0;
                display: block;
                width: 24px;
                height: 24px;
                margin-left: 2px;
            }
        }
    }

    .content-time {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time-txt {
            font-size: 20px;
            line-height: 22px;
            color: #798391;
            font-weight: 400;

            .txt-col {
                color: #49CA6F;
            }
        }
    }
}

.price{
	position: fixed;
    left: 0;
    bottom: 0;
	display: flex;
	justify-content: flex-end;
    width: 100vw;
    padding-top: 19px;
	padding-left: 56px;
	padding-right: 28px;
    padding-bottom: calc(20px + constant(safe-area-inset-bottom)); /* 兼容 iOS<11.2 */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* 兼容iOS>= 11.2 */
    background: #FFFFFF;
	.price-right{
		display: flex;
		align-items: center;
		.price-btn{
			flex-shrink: 0;
			display: block;
			width: 216px;
			height: 72px;
			background: #49CA6F;
			border-radius: 39px;
			font-size: 32px;
			line-height: 72px;
			color: #FFFFFF;
			font-weight: 500;
			border:none;
			margin-left: 14px;
		}
		.price-btn::after{
			border:none;
		}
		.refund-btn{
			width: 216px;
			height: 72px;
			border: 2px solid #49CA6F;
			font-size: 32px;
			line-height: 68px;
			color: #49CA6F;
			font-weight: 500;
			border-radius: 39px;
			background: #FFFFFF;
		}
	}
}
</style>